<template>
  <scroll-view scroll-y enable-flex class="video-main" @scrolltolower="handleToLower"> 
    <view class="video-item" v-for="item in videowp" :key="item.id" @click="handleGoVideo(item)">
      <image mode="widthFix" :src="item.img"></image>
    </view>
    
  </scroll-view>
</template>
<script>
export default {
  data() {
    return {
      videowp: [],
      hasMore: true
    }
  },
  props:{
    urlobj: Object
  },
  watch:{
    urlobj(){
      // console.log(this.urlobj);
      this.videowp = []
      this.getList();
    }
  },
  mounted(){
    // console.log(this.urlobj);
    
    this.getList();
  },
  methods: {
    getList(){
      this.request({
        url: this.urlobj.url,
        data: this.urlobj.params
      })
      .then(result=>{
        // console.log(result);
        if(result.res.videowp.length === 0){
          this.hasMore = false;
          uni.showToast({
            title:'没有更多数据了',
            icon: 'none'
          })
          return;
        }
        // this.videowp = result.res.videowp;
        this.videowp = [...this.videowp,...result.res.videowp];

      })
    },
    handleToLower(){
      if(this.hasMore){
        this.urlobj.params.skip += this.urlobj.params.limit;
        this.getList();
      }else{
        uni.showToast({
          title:'没有更多数据了',
          icon: 'none'
        })
      }
    },
    handleGoVideo(item){
      // 将数据存储到全局
      getApp().globalData.video = item;
      // 页面跳转到视频播放页面
      uni.navigateTo({
        url:'/pages/videoPlay/index'
      })
    }
  },
}
</script>
<style lang="scss" scoped>
  .video-main {
    display: flex;
    flex-wrap: wrap;
    height: calc(100vh - 36px);
  .video-item {
    width: 33.33%;
    border: 5rpx solid #fff;
    image{

    }
  }
}
</style>